<template>
  <div class="paperMain">
    <el-dialog title="提示" :visible.sync="isDel" width="30%">
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDel = false">取 消</el-button>
        <el-button type="primary" @click="del()">确 定</el-button>
      </span>
    </el-dialog>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/rl' }">日历</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/work/' }">事务列表</el-breadcrumb-item>
      <el-breadcrumb-item>事务单</el-breadcrumb-item>
    </el-breadcrumb>
    <table>
      <tbody>
        <tr>
          <td colspan="4">
            <div class="title">
              <h2>事务单</h2>
              <div class="qrcode" ref="qrCodeUrl"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>项目名</td>
          <td colspan="3">{{ workPaper.name }}</td>
        </tr>
        <tr>
          <td>开始时间</td>
          <td>{{ workPaper.start }}</td>
          <td>结束时间</td>
          <td>{{ workPaper.end }}</td>
        </tr>
        <tr>
          <td>发起人</td>
          <td>{{ workPaper.order }}</td>
          <td>经办人</td>
          <td>{{ workPaper.dos }}</td>
        </tr>
        <tr>
          <td colspan="4" v-if="workPaper.other">项目介绍</td>
        </tr>
        <tr v-if="workPaper.other">
          <td
            colspan="4"
            v-html="workPaper.other"
            style="text-align: left;"
          ></td>
        </tr>
        <tr>
          <td colspan="4" v-if="workPaper.nameList">名单</td>
        </tr>
        <tr v-if="workPaper.nameList">
          <td
            colspan="4"
            v-html="workPaper.nameList"
            style="text-align: left;"
          ></td>
        </tr>
        <tr>
          <td colspan="4" v-if="files.length">文件附录</td>
        </tr>
        <tr v-if="files.length">
          <td colspan="4">
            <div class="files">
              <div
                class="file"
                v-for="(item, index) in files"
                :onclick="`window.location.href='${item.url}'`"
              >
                <img
                  src="https://mooc2-ans.chaoxing.com/mooc2-ans/images/coursedata/zip.png"
                />
                {{ item.name }}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="messageMain">
      <div class="messageTable">
        <div class="messageCell">
          <titleBox :title="'官Q稿'"></titleBox>
        </div>
        <div class="messageCell">
          <div v-if="!workPaper.gq">
            <el-empty description="未发布任务"></el-empty><br />
            <el-button type="primary" size="mini" @click="createQ"
              >点击发布</el-button
            >
          </div>
          <div v-show="workPaper.gq">
            <readQ :id="workPaper.id" @hasQ="checkHasQ"></readQ>
          </div>
        </div>
      </div>

      <div class="messageTable">
        <div class="messageCell">
          <titleBox :title="'新闻稿'"></titleBox>
        </div>

        <div class="messageCell">
          <div v-if="!workPaper.news">
            <el-empty description="未发布任务"></el-empty><br />
            <el-button type="primary" size="mini" @click="createNews"
              >点击发布</el-button
            >
          </div>
          <div v-show="workPaper.news">
            <readNews :id="workPaper.id" @hasNews="checkHasNews"></readNews>
          </div>
        </div>
      </div>
    </div>

    <h4 align="center">来自{{ fromName }}的事务单</h4>
    <div style="text-align: center;">
      <el-button-group>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          v-if="qx > 0.5"
          @click="
            () => {
              this.$router.push('/work/add?id=' + this.workPaper.id);
            }
          "
          >编辑</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-printer"
          @click="print"
          size="mini"
          v-if="qx > 0"
          >打印</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          v-if="qx > 0"
          >保存</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-share"
          size="mini"
          v-if="qx > 0.5"
          @click="share = true"
          >转发</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          v-if="qx > 0.5"
          @click="isDel = true"
          >删除</el-button
        >
      </el-button-group>
    </div>
    <el-drawer
      title="选择转发对象"
      :visible.sync="share"
      direction="rtl"
      size="50%"
    >
      被转发的人可浏览此任务单。
      <seleceDepartment
        @setCanSee="setCanSee"
        :person="workPaper.cansee"
      ></seleceDepartment>
    </el-drawer>
  </div>
</template>

<script>
import upload from "../tool/upload.vue";
import userApi from "../../api/user.js";
import fileApi from "../../api/file.js";
import workApi from "../../api/work.js";
import readQ from "../message/ReadQ.vue";
import readNews from "../message/readNews.vue";
import seleceDepartment from "../selectDeparment.vue";
import titleBox from "../title.vue";
import QRCode from "qrcodejs2";
import messageApi from "../../api/message.js";
export default {
  data() {
    return {
      qrcode: "",
      workPaper: {
        id: "",
        name: "",
        start: "",
        end: "",
        order: "",
        dos: "",
        other: "",
        cansee: null,
        fullscreenLoading: true
      },
      isDel: false,
      files: [],
      share: false,
      qx: 0,
      fromName: ""
    };
  },
  methods: {
    print() {
      window.print();
    },
    setCanSee(presons) {
      let param = [];
      for (let see of presons) {
        param.push(see.id);
      }
      this.workPaper.cansee = param;
      workApi.setCanSee(this.workPaper.id, param.toString()).then(res => {
        if (res.code == 1) {
          this.$message.success("保存成功");
        }
      });
    },
    del() {
      workApi.delMyWork(this.workPaper.id).then(res => {
        if (res.affectedRows >= 0) {
          this.$notify.success({
            title: "成功",
            message: "删除成功"
          });
          this.$router.replace("/work");
        }
      });
    },
    createQ() {
      messageApi
        .creat(this.workPaper.id, this.workPaper.fromid, this.workPaper.start)
        .then(res => {
          if (res.code == 1) {
            this.$message.success("创建成功");
            this.$router.push("../refresh");
          }
        });
    },
    createNews() {
      messageApi
        .creat(
          this.workPaper.id,
          this.workPaper.fromid,
          this.workPaper.start,
          true
        )
        .then(res => {
          if (res.code == 1) {
            this.$message.success("创建成功");
            this.$router.push("../refresh");
          }
        });
    },
    creatQrCode() {
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.qrcode, // 需要转换为二维码的内容
        width: 70,
        height: 70,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.L
      });
    },
    checkHasQ(q) {
      this.workPaper.gq = q;
    },
    checkHasNews(q) {
      this.workPaper.news = q;
    },
    urlify(text) {
      const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
      return text
        .replace(urlRegex, url => {
          let urltype = url.substr(-6);
          let skipurl = url.slice(0, -6);
          switch (urltype) {
            case "-video":
              return `<video src="${skipurl}" controls></video><br>若不能播放请<a class="el-link el-link--primary is-underline" href="${skipurl}">点击这里</a>`;
            case "-image":
              return `<img src="${skipurl}">`;
          }
          return `<a class="el-link el-link--primary is-underline" href="${url}">${url}</a>`;
        })
        .replaceAll("\n", "<br>");
    }
  },
  components: {
    upload,
    readQ,
    readNews,
    seleceDepartment,
    titleBox
  },
  created() {
    this.qrcode = window.location.href;
    workApi.getPaper(this.$route.query.id || 1).then(res => {
      this.fullscreenLoading = false;
      if (res.code == -1) {
        this.$notify.error({
          title: "错误",
          message: "页面不存在"
        });
        return;
      }
      if (res.code == -2) {
        this.$notify.error({
          title: "错误",
          message: "无此权限"
        });
      } else {
        this.qx = res.AC;
      }
      this.workPaper = res;
      this.workPaper.other = this.urlify(this.workPaper.other);
      for (let i of res["fileid"].split(",")) {
        fileApi.getFile(i).then(res => {
          let info = res;
          info
            ? this.files.splice(0, 0, {
                type: info.type ? info.type : null,
                name: info.pruename ? info.pruename : info.name,
                url: info.url
              })
            : null;
        });
      }
    });

    userApi.getUserInfo(this.workPaper.fromid).then(res => {
      this.fromName = res.name;
    });
  },
  mounted() {
    this.creatQrCode();
  }
};
</script>

<style scoped>
.paperMain {
  margin-top: 30px;
  margin-left: 10px;
}

table {
  width: 80%;
  margin-left: 10%;
  border-collapse: collapse;
  margin-top: 35px;
}

.title {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

td {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}

.file {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file img {
  width: 28px;
  height: 28px;
}

.files {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-around;
}

.messageTable {
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 50%;
}

.messageMain {
  display: flex;
  width: 80%;
  margin-left: 10%;
}

@media screen and (max-width: 620px) {
  .messageMain {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }

  .messageTable {
    width: 80%;
    margin-left: 10%;
  }
}
</style>
